{% extends 'base.html' %}
{% load i18n %}

{% block title %} {% trans 'Articles' %} {% endblock %}

{% block head %}
    <link href="{{ STATIC_URL }}css/articles.css" rel="stylesheet">
{% endblock head %}

{% block main %}
    <div class="page-header">
        {% if not user.is_anonymous %}
            <a href="{% url 'write' %}" class="btn btn-primary pull-right">
                <span class="glyphicon glyphicon-pencil"></span> {% trans 'Write Article' %}
            </a>
            <a href="{% url 'drafts' %}" class="btn btn-default pull-right"
               style="margin-right: .8em">{% trans 'Drafts' %}</a>
        {% endif %}
        <h1>{% trans 'Articles' %}</h1>
    </div>
    <div class="row">
        <div class="col-md-10">
            <section class="articles">
                {% for article in articles %}
                    {% include 'articles/partial_article.html' with article=article %}
                {% empty %}
                    <h4 class="no-data">{% trans 'There is no published article yet' %}. <a
                            href="{% url 'write' %}">{% trans 'Be the first one to publish' %}!</a></h4>
                {% endfor %}
            </section>
        </div>
        <div class="col-md-2 popular-tags">
            <h4>{% trans 'Popular Tags' %}</h4>
            {% for tag, count in popular_tags %}
                <a href="{% url 'tag' tag %}"><span class="label label-default">{{ count }} {{ tag }}</span></a>
            {% endfor %}
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            {% include 'paginator.html' with paginator=articles %}
        </div>
    </div>
{% endblock main %}
